<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伙伴相容性分析</title>
    <style>
        body {
            font-family: 'Comic Sans MS', cursive;
            background: #f0e6d6;
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .question {
            display: none;
            animation: fadeIn 0.5s;
        }

        .active {
            display: block;
        }

        button {
            background: #ffd700;
            border: 2px solid #ffb300;
            border-radius: 15px;
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        button:hover {
            transform: scale(1.05);
            background: #ffeb3b;
        }

        #result {
            font-size: 1.2em;
            text-align: center;
            margin-top: 20px;
        }

        @keyframes fadeIn {
            from {opacity: 0;}
            to {opacity: 1;}
        }

        .dog-emoji {
            font-size: 3em;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="dog-emoji">🐾🐶🥎</div>
        <div id="welcome">
            <h2>伙伴相容性分析问卷</h2>
            <p>请诚实地回答以下问题：</p>
            <button onclick="startTest()">开始测试</button>
        </div>

        <div id="q1" class="question">
            <h3>当听到"散步"这个词时，你的第一反应是？</h3>
            <button onclick="answer(1, 10)">立即冲向门口</button>
            <button onclick="answer(1, 5)">检查零食储备</button>
            <button onclick="answer(1, 0)">继续躺着不动</button>
        </div>

        <div id="q2" class="question">
            <h3>最喜欢的交流方式是？</h3>
            <button onclick="answer(2, 10)">肢体语言</button>
            <button onclick="answer(2, 5)">简短直接的表达</button>
            <button onclick="answer(2, 0)">长篇大论的讨论</button>
        </div>

        <div id="q3" class="question">
            <h3>对项圈的审美要求？</h3>
            <button onclick="answer(3, 10)">时尚设计最重要</button>
            <button onclick="answer(3, 5)">舒适性优先</button>
            <button onclick="answer(3, 0)">不需要装饰品</button>
        </div>

        <div id="result"></div>
    </div>

    <script>
        let currentQuestion = 0;
        let totalScore = 0;

        function startTest() {
            document.getElementById('welcome').style.display = 'none';
            showQuestion(1);
        }

        function showQuestion(qNumber) {
            document.querySelectorAll('.question').forEach(q => q.classList.remove('active'));
            document.getElementById(`q${qNumber}`).classList.add('active');
        }

        function answer(qNumber, score) {
            totalScore += score;
            
            if (qNumber < 3) {
                showQuestion(qNumber + 1);
            } else {
                showResult();
            }
        }

        function showResult() {
            document.querySelectorAll('.question').forEach(q => q.style.display = 'none');
            const resultDiv = document.getElementById('result');
            
            let message = '';
            const percentage = Math.min(Math.floor(totalScore / 30 * 100), 100);

            if (totalScore > 25) {
                message = `相容度 ${percentage}% 🎉<br>检测到强烈的伙伴联结意向！`;
            } else if (totalScore > 15) {
                message = `相容度 ${percentage}% 🐾<br>存在潜在合作可能性`;
            } else {
                message = `相容度 ${percentage}% 🌟<br>保持友好关系更重要哦`;
            }

            resultDiv.innerHTML = `
                <div class="dog-emoji">${totalScore > 25 ? '🦴🎖️🐕' : '🐩✨'}</div>
                <h3>分析结果：</h3>
                <p>${message}</p>
                <button onclick="location.reload()">重新测试</button>
            `;
        }
    </script>
</body>
</html>